<template>
  <div>
    <div style="">
      <el-carousel indicator-position="outside" height="300"  style="">
        <el-carousel-item v-for="item in imgUrls" :key="item">
          <img ref='img' :src="item" style="z-index: 4;height: 300px"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 职位卡-->
      <div class="container" style="z-index: 4;height: 10px; width: 100%; margin-bottom: 10px">&nbsp;</div>
      <div class="banner-sub" style="display: flex" >
        <div v-for="n in 3" class="banner-sub_item"  style="" >
          <a><img style="width: 70px;height: 70px;" src="../../../assets/imgs/jd.jpg"></a>
          <a class="item2" style="" >
            <p class="item2_title" ><a>阿斯利康</a></p>
            <p >培训生项目</p>
          </a>
        </div>
      </div>
  </div>
</template>

<script>
import banaer1 from '@/assets/img/luobo1.jpg'
import banaer2 from '@/assets/img/luobo2.jpg'
import banaer3 from '@/assets/img/luobo3.jpg'
import banaer4 from '@/assets/img/luobo4.jpg'
export default {
  name: 'carousel-img',
  data() {
    return {
      imgUrls: [],
      banaers: [
        { id: 1, url: banaer4 },
        { id: 2, url: banaer3 },
        { id: 3, url: banaer2 },
        { id: 4, url: banaer1 }
      ]
    }
  },
  created () {
    this.getImages()
  },
  methods: {
    // banaer图加载
    getImages() {
      this.banaers.forEach(res => {
        this.imgUrls.push(res.url)
      })
      // console.log(this.imgUrls)
    }
  }
}
</script>

<style scoped>
/* 轮播 s */
.mid-bar .el-carousel__item{
  /*z-index: 10!important;*/
}
.banner-sub{
  width: 800px;
  height: 71px;
  display: flex;
}
.banner-sub .banner-sub_item{
  width: 191px;
  display: flex;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  /* box-sizing: border-box; */
}

.banner-sub .banner-sub_item a:nth-child(2) {
  height: 70px;
  background-color: #fafafa;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  justify-content: flex-start;
  justify-content: center; /*  水平居中  */
  align-center: center;
  padding-left: 15px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: #fafafa;
}
.banner-sub_item .item2 p{
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.banner-sub_item .item2 .item2_title{
  /* color: #666666; */
  color: #6aa2e4;
  margin-bottom: 13px!important;
}

</style>
